<template>
  <div :class="['LxwomenPanel',showOrHideCls]">
    <div class="view">
      <div class="left">
        <div class="txt1">山葵说(深圳)餐饮管理有限公司</div>
        <div class="txt2">Shankui Shuo (Shenzhen) Catering Management Co., Ltd</div>
        <div class="txt3">地址：深圳市福田区福田街道福安社区福华三路168号国际商会中心2703 </div>
        <div class="imgitem ma">
          <img src="img/lianxP/ma.png?v=1.0">
        </div>
        <div class="imgitem dh">
          <img src="img/lianxP/dh.png">
        </div>


      </div>
      <div class="right">
        <div class="title">
          <img src="img/lianxP/wt.png">
        </div>
        <div class="conn">
          <div class="xinxDiv">
            <div class="txt">
              <img src="img/lianxP/xm.png" style=" margin-top: -5px;">
              <span>姓名</span>
            </div>
            <div class="con">
              <input autocomplete="off" class="inputCode" type="text"  id="refinputname"   ref="refinputname" placeholder='请输入姓名' @input="handlerchangeName" :value="store.state.lxwomData.name">
            </div>
          </div>
          <div class="xinxDiv">
            <div class="txt">
              <img src="img/lianxP/dh2.png" style=" margin-top: -5px;">
              <span>电话</span>
            </div>
            <div class="con">
              <input autocomplete="off" class="inputCode" type="text"  id="refinputphone"   ref="refinputphone" placeholder='请输入电话'
                     @keypress="onlyNumbers"  @input="handlerchangePhone" :value="store.state.lxwomData.phone">
            </div>
          </div>

          <div class="xinxDiv">
            <div class="txt">
              <img src="img/lianxP/nr.png" style=" margin-top: -5px;">
              <span>内容</span>
            </div>
            <div class="con" style="height: 120px;padding-top: 5px;">
              <textarea autocomplete="off" class="inputliuy nr" type="text"    ref="refliuy" placeholder='留言内容' @input="handlerchangeNR" :value="store.state.lxwomData.con"></textarea>
            </div>
          </div>
          <div class="tijiaoBTn" @click="tijiaoBTnClick()">提交</div>
        </div>

      </div>
    </div>
  </div>
</template>


<style scoped>
.LxwomenPanel{
 position: relative;background: #F6F8E3;width: 100%;
}

.view{
  position:relative;left: 0;top:0;max-width: 1200px;margin: auto;
  display:flex;display: -webkit-flex;flex-direction:row;padding-bottom: 50px;padding-top: 50px;
}
.view .left{
  position: relative;width: 40%;text-align: left;margin-top: 60px;margin-left: 70px; color: #3E3A39;

}
.view .left .txt1{
  font-weight: normal;font-size: 28px;line-height: 30px;
}
.view .left .txt2{
  font-size: 14px;line-height: 30px;opacity: 0.5;
}
.view .left .txt3{
  font-size: 14px;line-height: 20px;opacity: 0.5;padding-top: 25px;
}


.view .left .imgitem{
  width: 60%;
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:center;
}
.view .left .ma{
  /*transform: scale(0.8);*/width: 160px;height: 160px;padding-top: 30px;margin-left: 24%;
}
.view .left .ma img{
  width: 160px;height: 160px;
}
.view .left .dh{
  transform: scale(0.5);margin-top: -10px;margin-left: 10%;
}


.view .right{
  position: relative;width: 60%;color: #3E3A39;
}
.view .right .title{
  position: relative;
}
.view .right .title img{

}
.view .right .conn{
  position: relative;width: 600px;height: 310px;background: #FFFFFF;border-radius: 10px;padding-left: 30px;padding-top: 20px;

}
.view .right .title img{
  position: relative;width: 601px;height: 148px;
}

.view .right .xinxDiv{
  display:flex;display: -webkit-flex;flex-direction:row;justify-content:flex-start;
}
.view .right .xinxDiv .txt{
  position: relative;line-height: 34px;padding-right: 20px;padding-bottom: 20px;
}
.view .right .xinxDiv .txt span{
  padding-left: 5px;
}
.view .right .xinxDiv .txt img{
  width: 15px;height: 17px;
}
.view .right .xinxDiv .con{
  background: #F6F8E3;border-radius: 15px;border: 0px solid #989898;width: 480px;height: 30px;
}
.inputCode{
  background-color:transparent;position:relative;width: 100%;height: 100%;text-align: left;
  outline:none;font-weight: 400;padding-left: 10px;
}
.inputliuy{
  background-color:transparent;position:relative;width: 100%;height: 100%;text-align: left;
  outline:none;font-weight: 400;padding-left: 10px;border: none;line-height: 30px;
  overflow: hidden;
}
.view .right .xinxDiv .con .nr{
  height: 110px;line-height: 18px;
}
.tijiaoBTn{
  position: relative;background-color: #F3F3A5;width: 480px;height: 30px;border-radius:18px;line-height: 30px;
  margin: auto;margin-top: 20px;cursor: pointer;
}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";


let store = useStore();


onMounted(() => {
  console.log("LxwomenPanel onMounted 联系我们一级页面 初始化");
  window.scrollTo(0, 0);
  store.state.channelId=Enum.cId_7;
});


onBeforeUnmount(() => {
  console.log('LxwomenPanel onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("LxwomenPanel onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');
let refinputname=ref(null);
function handlerchangeName(evt){
  store.state.lxwomData.name=refinputname.value.value;
  console.log("LxwomenPanel handlerchangeName ",refinputname.value.value,);
}

let refinputphone=ref(null);let numericValue = ref(0);
function handlerchangePhone(evt){
  store.state.lxwomData.phone=refinputphone.value.value;
  console.log("LxwomenPanel handlerchangePhone ",refinputphone.value.value,);
}


let refliuy=ref(null);
function handlerchangeNR(evt){
  store.state.lxwomData.con=refliuy.value.value;
  console.log("LxwomenPanel handlerchangeNR ",refliuy.value.value,);
}
function onlyNumbers(event) {
  // 允许输入数字、小数点、负号
  let keyCode = event.keyCode === 0 ? event.which : event.keyCode;
  if (!(keyCode >= 48 && keyCode <= 57) && keyCode !== 46 && keyCode !== 189) {
    event.preventDefault();
  }
}

function tijiaoBTnClick(){
  console.log("LxwomenPanel tijiaoBTnClick ");
  $.ajax({
    url: store.state.data_url+'api/saveSuggest',
    type: 'POST',
    dataType: 'json',
    jsonp: "",
    cache: false,
    data: {"name":store.state.lxwomData.name,phone:store.state.lxwomData.phone, content:store.state.lxwomData.con},
    success: function(data) {

      console.log("LxwomenPanel getChannelListById ",data);
      if(data.state==0 || data.state==207){
        store.state.lxwomData.name='';store.state.lxwomData.phone='';store.state.lxwomData.con='';
      }
      winApp.sendNotification(Enum.VIEW_LabelNoticeView,data.message);
    },
    error: function(xhr, textStatus, errorThrown) {
      console.log("网络错误!");
    }
  });
}
</script>
